<template>
  <div class="hospitail-detail">
    <div class="block">
      <header>
        <h2>订单流程</h2>
      </header>
      <!-- 订单状态集 -->
      <section>
        <el-steps class="hospitail-detail--step" :active="activeStatus" align-center>
          <el-step :description="item.time" :title="item.title" v-for="(item, index) in stepList" :key="index" :class="{'is-first': index === 0, 'is-last': index === stepList.length - 1}">
            <div slot="icon" class="el-icon--active__custom">
              <div class="step--img">
                <img :src="item.status === '1' ? item.finishSrc : item.waitSrc" alt="">
              </div>
            </div>
            <div slot="title" class="el-icon--active__custom">
              <span>{{ item.name }}</span>
              <div v-if="activeStatus === index && item.next" class="step--next--step">
                {{item.next}}
              </div>
            </div>
          </el-step>
        </el-steps>
      </section>
      <!-- 订单操作记录 -->
      <section class="hospitail-detail--step__vertical" >
        <div class="hospitail-detail--text">
          <img :src="activeTimeImg" alt="">
          <span>当前状态：</span>
          <span>{{orderDetail.orderStatusName}}</span>
        </div>
        <el-timeline reverse>
          <el-timeline-item v-for="(item, index) in timeList" :key="index" :timestamp="item.receiveTime" placement="top" :class="{'big-dot': item.type === '2', 'time--last': index === timeList.length - 1}">
            {{ item.remark }}
            <div class="custom-dot" v-if="index === timeList.length - 1" slot="dot">
              <img :src="lastTimeDot" alt="">
            </div>
          </el-timeline-item>
        </el-timeline>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>收货人信息</h2>
      </header>
      <section>
        <el-row :gutter="80">
          <el-col :span="8">
            收货联系人
            <span>{{ addressResDto.userName }}</span>
          </el-col>
          <el-col :span="8">
            联系电话
            <span>{{ addressResDto.userPhone }}</span>
          </el-col>
          <el-col :span="8">
            收货地址
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                addressResDto.province
                  ? `${addressResDto.province}${addressResDto.city}${addressResDto.area}${addressResDto.detailedAddress}`
                  : ''
              "
              placement="top"
            >
              <span
                >{{ addressResDto.province }}{{ addressResDto.city }}{{ addressResDto.area
                }}{{ addressResDto.detailedAddress }}</span
              >
            </el-tooltip>
          </el-col>
          <el-col :span="8" v-if="orderDetail.freight">
            运费承担方
            <span>{{ orderDetail.freight }}</span>
          </el-col>
        </el-row>
      </section>
    </div>

    <div class="block">
      <header>
        <h2>订单信息</h2>
      </header>
      <section>
        <el-row :gutter="80">
          <el-col :span="8">
            订单编号
            <span>{{ orderDetail.orderCode }}</span>
          </el-col>
          <el-col :span="8">
            供应商
            <span>{{ supplierVo.vendorName }}</span>
          </el-col>
          <el-col :span="8">
            医院
            <span>{{ orderDetail.hospitalName ? orderDetail.hospitalName : '' }}</span>
          </el-col>
          <el-col :span="8">
            下单人
            <span>{{ orderDetail.commitUser ? orderDetail.commitUser : '' }}</span>
          </el-col>
          <!-- <el-col :span="10">
            支付方式
            <span>{{orderDetail.payType === 1?'线下支付':"线上支付"}}</span>
          </el-col>-->
          <el-col :span="8">
            订单类型
            <span>{{ orderDetail.orderTypeName ? orderDetail.orderTypeName : '' }}</span>
          </el-col>
          <el-col :span="8">
            备注信息
            <el-tooltip
              class="item"
              effect="dark"
              :content="orderDetail.remark ? orderDetail.remark : ''"
              placement="top"
            >
              <span>{{ orderDetail.remark ? orderDetail.remark : '' }}</span>
            </el-tooltip>
          </el-col>
          <!-- 有字段时展示，否则隐藏  -->
          <el-col v-if="orderDetail.closeCount != 0" :span="8">
            关闭数量
            <span>{{ orderDetail.closeCount ? orderDetail.closeCount : '' }}</span>
          </el-col>
          <el-col v-if="orderDetail.closeCount != 0" :span="8">
            退款金额
            <span>{{ orderDetail.refundAmount ? orderDetail.refundAmount : '' }}</span>
          </el-col>
          <el-col v-if="orderDetail.cancelCount != 0" :span="8">
            取消数量
            <span>{{ orderDetail.cancelCount ? orderDetail.cancelCount : '' }}</span>
          </el-col>
          <el-col :span="8" v-if="orderDetail.orderCodeRelate" style="color:red;">
            关联采购单号
            <span>{{ orderDetail.orderCodeRelate ? orderDetail.orderCodeRelate : '' }}</span>
          </el-col>
          <el-col :span="8" v-if="orderDetail.orderCodeReturn" style="color:red;">
            关联退货单号
            <span>{{ orderDetail.orderCodeReturn ? orderDetail.orderCodeReturn : '' }}</span>
          </el-col>
        </el-row>
      </section>
    </div>
    <!-- 附加信息--不要了 -->
    <!-- <div class="block">
      <header>
        <h2>附加信息</h2>
      </header>
      <section>
        <p v-if="orderAppendPOS.length === 0" style="color:#999999">
          暂无信息
        </p>
        <el-row v-else :gutter="80">
          <el-col v-for="(item, index) in orderAppendPOS" :key="index" :span="8">
            {{ item.attributeName }}
            <span>{{ item.attributeValue ? item.attributeValue : '' }}</span>
          </el-col>
        </el-row>
      </section>
    </div> -->
    <div class="block">
      <header>
        <h2>订单产品信息</h2>&nbsp;&nbsp;
        <p>(产品总数量：{{orderDetail.productCount}})</p>
      </header>
      <section>
        <el-editable
          v-loading="tableLoading"
          height="400"
          :columns="COLUMNS"
          :data="payload.content"
          :row-class-name="tableRowClassName"
          :payload="payload"
          :need-pagination="true"
          @reload="reloadProductData"
        >
          <template slot="header-referencePrice" slot-scope="{column}">
            <span>
              {{orderDetail.orderStatus && ['1', '2', '8'].includes(orderDetail.orderStatus.toString()) ? column.label.split(',')[0] : column.label.split(',')[1]}}
            </span>
          </template>
          <!-- <template slot="header-confirmCount" slot-scope="{column}">
            <span>
              {{orderDetail.orderStatus && ['1', '2', '5', '8'].includes(orderDetail.orderStatus.toString()) ? column.label.split(',')[0] : column.label.split(',')[1]}}
            </span>
          </template> -->
        </el-editable>
      </section>
    </div>
    <div v-if="cancelContent.length > 0" class="block">
      <header>
        <h2>关闭未交产品({{orderDetail.closeCount}})</h2>
      </header>
      <section>
        <el-editable
          v-loading="cancelTableLoading"
          height="400"
          :columns="CANCEL_COLUMNS"
          stripe
          :data="cancelPayload.content"
          :payload="cancelPayload"
          :need-pagination="true"
          @reload="cancelReloadProductData"
        />
      </section>
    </div>
    <div class="block">
      <header>
        <h2>明细</h2>
      </header>
      <section class="orderTab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="库存配位" name="first">
            <el-editable
              v-if="stockBatchData.length > 0"
              height="400"
              :data="stockBatchData"
              :columns="DELIVERY_ORDER_COLUMNS"
              stripe
            />
            <h3 v-else style="color:#999999;margin:100px 200px;">
              暂无信息
            </h3>
          </el-tab-pane>
          <!-- <el-tab-pane label="支付信息" name="second">
            <el-editable
              v-if="payDetailData.length > 0"
              height="400"
              :data="payDetailData"
              :columns="PAY_INFO"
              stripe
            />
            <h3 v-else style="color:#999999;margin:100px 200px;">
              暂无信息
            </h3>
          </el-tab-pane> -->
          <el-tab-pane label="配送信息" name="third">
            <el-editable
              v-if="logisticsData.length > 0"
              height="400"
              :data="logisticsData"
              :columns="SHIPPING_INFORMATION"
              stripe
            />
            <h3 v-else style="color:#999999;margin:100px 200px;">
              暂无信息
            </h3>
          </el-tab-pane>
          <el-tab-pane label="收货信息" name="fourth">
            <el-editable
              v-if="order_tab.length > 0"
              height="400"
              :columns="RECEIVE_COORDINATION"
              :data="order_tab"
              stripe
            >
              <template slot="default-action" slot-scope="scope">
                <el-button type="text" @click="showLog(scope.row)">
                  详情
                </el-button>
              </template>
            </el-editable>
            <h3 v-else style="color:#999999;margin:100px 200px;">
              暂无信息
            </h3>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>

    <el-dialog title="详情" :modal="true" custom-class="dialog-custom" :visible.sync="dialogVisible" width="70%">
      <el-editable
        :data="receivData.content"
        :loading="receivDataLoading"
        :columns="RECEIVE_COLUMNS"
        :payload="receivData"
        :need-pagination="true"
        stripe
        height="400"
        @reload="reloadReceiv"
      />
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
